<%-- 
    Document   : bacreport
    Created on : Oct 23, 2011, 4:11:11 PM
    Author     : javierpanchi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html> 
    <head> 
        <title>BAC Report</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
        <link rel="stylesheet" href="/Drinkmeter/css/TabStyle.css">
    </head> 

    <body onload="timerCount('bacreport')">
        <div data-role="page">
            <div data-role="header">
                <h1>Personal Stats</h1>
            </div><!-- /header -->
            <div data-role="content">	
               
                <div>
                    <label for="name">Drinks Consumed:</label>
                    <input type="text" name="name" id="name" value="${drinks}" readonly="true" />
                </div>	

                <div>
                    <fieldset data-role="controlgroup" data-type="horizontal" >
                        <label for ="name">Time Elapsed:</label>
                        <input type="text" name="name" id="name" value="${time}" readonly="true" />
                    </fieldset>
                </div>

                <div>
                    <label for="name">Current BAC:</label>
                    <input type="text" name="name" id="name" value="${BAC}" readonly="true" />
                </div>	

                <div>
                    <label for="name">Limit BAC: </label>
                    <input type="text" name="name" id="name" value="0.5" readonly="true" />
                </div>	

                <div style="top: 310.5px;" class="ui-loader ui-body-a ui-corner-all"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>

                <footer>
                    <div id='tabbarcontainer'>
                        <ul id='tabbar'>
                            <div id="mensajes"></div>
                            <li class='tab'><a href="#" id='tab_home' onclick="window.location='/Drinkmeter'">Tab 1</a></li>
                            <li class='tab'><a href="/Drinkmeter/FacebookServlet" id='tab_friends'>Tab 2</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/drinks.jsp'" id='tab_drinks'>Tab 3</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/DrinksServlet?opt=report'" id='tab_stats'>Tab 4</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/leave.jsp'" id='tab_locations'>Tab 5</a></li>
                        </ul>
                    </div>
                    <script type='text/javascript'>
                        $('li.tab a').bind('click', function(event) {
                            $('li.tab a').removeClass('active');
                            $(event.target).addClass('active');
                        });
                    </script>
                </footer>
            </div>
        </div>
    </body>
</html>